<script>
export default {
    props: {
        'modelValue': String,
        'abcName': [String, Number],
        'efgName': [String, Number],
        modelModifiers: {
            default: () => ({})
        }
    },
    emits: ['update:modelValue', 'update:abcName', 'update:efgName'],
    methods: {
        emitValue(e) {
            let value = e.target.value
            if (this.modelModifiers.capitalize) {
                value = value.charAt(0).toUpperCase() + value.slice(1)
            }
            this.$emit('update:modelValue', value)
        }
    }
}
</script>

<template>
    <input :value="modelValue" @input="emitValue">
    <input type="text" :value="abcName" @input="$emit('update:abcName', $event.target.value)">
    <input type="text" :value="efgName" @input="$emit('update:efgName', $event.target.value)">
</template>

<style scoped></style>
